import { Card, Select, Button, Input, Table, message } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import { useEffect, useState } from "react";
import {
  getHospitalList,
  getProvince,
  getCity,
  getArea,
  getHospitalType,
  updateStatus,
} from "@/api/hospital/hospitalList";
import {
  Content,
  Province,
  ContentItem,
} from "@/api/hospital/hospitalList/model/types";
import { useNavigate } from "react-router-dom";

export default function HospitalList() {
  const navigate = useNavigate();

  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [hospitalList, setHospitalList] = useState<Content>([]);

  const [province, setProvince] = useState<Province>();
  const [city, setCity] = useState<Province>();
  const [area, setArea] = useState<Province>();
  const [hospitalType, setHospitalType] = useState<Province>();

  const [hosname, setHosname] = useState("");
  const [hoscode, setHoscode] = useState("");
  const [hostype, setHostype] = useState<string | undefined>();
  const [provinceCode, setProvinceCode] = useState<string | undefined>();
  const [cityCode, setCityCode] = useState<string | undefined>();
  const [disTrictCode, setDisTrictCode] = useState<string | undefined>();
  const [status, setStatus] = useState<string | undefined>();
  const [hospitalInfo, setHospitalInfo] = useState({});

  const [loading, setLoading] = useState(false);

  const getHospitalListFun = async (
    page: number,
    pageSize: number,
    hospitalInfo?: any
  ) => {
    setLoading(true);
    const res = await getHospitalList(page, pageSize, hospitalInfo);
    setHospitalList(res.content);
    setTotal(res.totalElements);
    setLoading(false);
  };
  const getProvinceFun = async () => {
    const res = await getProvince();
    setProvince(res);
  };
  const getCityFun = async (provinceId: string) => {
    const res = await getCity(provinceId);
    setCity(res);
  };
  const getAreaFun = async (cityId: string) => {
    const res = await getArea(cityId);
    setArea(res);
  };
  const getHospitalTypeFun = async () => {
    const res = await getHospitalType("10000");
    setHospitalType(res);
  };

  const clearHospitalInfo = () => {
    setHosname("");
    setHoscode("");
    setHostype(undefined);
    setProvinceCode(undefined);
    setCityCode(undefined);
    setDisTrictCode(undefined);
    setStatus(undefined);
    getHospitalListFun(page, pageSize);
  };

  useEffect(() => {
    getProvinceFun();
    getHospitalTypeFun();
    getHospitalListFun(page, pageSize);
  }, []);

  const data: ContentItem[] = hospitalList;

  const columns: ColumnsType<ContentItem> = [
    {
      title: "序号",
      align: "center",
      width: 70,
      render: (text, _, index) => <>{index + 1}</>,
    },
    {
      title: "医院logo",
      dataIndex: "logoData",
      render(_) {
        return <img src={"data:image/png;base64," + _} alt="" width="80" />;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "等级",
      width: 100,
      render: (_) => <>{_.param.hostypeString}</>,
    },
    {
      title: "详细地址",
      render: (_) => <>{_.param.fullAddress}</>,
    },
    {
      title: "状态",
      width: 80,
      render: (_) => (_.status ? <>{"已上线"}</> : <>{"未上线"}</>),
    },
    {
      title: "创建时间",
      dataIndex: "updateTime",
    },

    {
      title: "操作",
      width: 260,
      render: (text, _, record) => (
        <p>
          <Button
            type="primary"
            style={{ marginRight: 15 }}
            onClick={() => {
              navigate(`/syt/hospital/hospitalList/show/${text.id}`);
            }}
          >
            查看
          </Button>
          <Button
            type="primary"
            style={{ marginRight: 15 }}
            onClick={() => {
              console.log(_.hoscode);

              navigate(`/syt/hospital/hospitalList/schedule/${_.hoscode}`);
            }}
          >
            排班
          </Button>
          <Button
            type="primary"
            onClick={async () => {
              await updateStatus(_.id, _.status ? 0 : 1);
              message.success("更新状态成功");
              getHospitalListFun(page, pageSize);
            }}
          >
            {_.status ? "下线" : "上线"}
          </Button>
        </p>
      ),
    },
  ];

  return (
    <div>
      <Card>
        <Select
          placeholder="请选择省"
          style={{ width: "190px", marginRight: 15 }}
          onChange={(val) => {
            getCityFun(val);
            setProvinceCode(val);
          }}
          options={province}
          fieldNames={{
            label: "name",
            value: "id",
          }}
          value={provinceCode}
        ></Select>
        <Select
          placeholder="请选择市"
          style={{ width: "190px", marginRight: 15 }}
          onChange={(val: string) => {
            getAreaFun(val);
            setCityCode(val);
          }}
          value={cityCode}
          options={city}
          fieldNames={{
            label: "name",
            value: "id",
          }}
        ></Select>
        <Select
          placeholder="请选择区"
          style={{ width: "190px", marginRight: 15 }}
          onChange={(val) => {
            setDisTrictCode(val);
          }}
          options={area}
          fieldNames={{
            label: "name",
            value: "id",
          }}
          value={disTrictCode}
        ></Select>
        <Input
          placeholder="医院名称"
          style={{ width: "190px", marginRight: 15 }}
          value={hosname}
          onChange={(e) => {
            setHosname(e.target.value);
          }}
        ></Input>
        <Input
          placeholder="医院编号"
          style={{ width: "190px", marginRight: 15 }}
          value={hoscode}
          onChange={(e) => {
            setHoscode(e.target.value);
          }}
        ></Input>
        <Select
          placeholder="医院类型"
          style={{ width: "190px", marginRight: 15 }}
          options={hospitalType}
          fieldNames={{
            label: "name",
            value: "id",
          }}
          value={hostype}
          onChange={(e) => {
            setHostype(e);
          }}
        ></Select>
        <Select
          placeholder="医院状态"
          style={{ width: "190px", marginRight: 15, marginTop: 15 }}
          options={[
            {
              label: "已上线",
              value: "1",
            },
            {
              label: "未上线",
              value: "0",
            },
          ]}
          value={status}
          onChange={(val) => {
            setStatus(val);
          }}
        ></Select>
        <Button
          type="primary"
          style={{ marginRight: 15 }}
          onClick={() => {
            setHospitalInfo({
              hoscode,
              hosname,
              hostype,
              provinceCode,
              cityCode,
              disTrictCode,
              status,
            });
            getHospitalListFun(page, pageSize, hospitalInfo);
          }}
        >
          <SearchOutlined />
          查询
        </Button>
        <Button onClick={clearHospitalInfo}>清空</Button>
        <Table
          loading={loading}
          bordered
          style={{ marginTop: 20 }}
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `总共: ${total} `,
            defaultPageSize: 5,
            pageSizeOptions: [5, 10, 15, 20],
            onChange: (page, pageSize) => {
              setPage(page);
              setPageSize(pageSize);
              getHospitalListFun(page, pageSize);
            },
          }}
        />
      </Card>
    </div>
  );
}
